<template>
  <!-- 患者管理 -->
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
      <el-form-item label="身份证号" prop="idcard">
        <el-input v-model="queryParams.idcard" placeholder="请输入身份证号" clearable size="small" style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable size="small" style="width: 240px"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="日期" prop="dateTime">
        <el-date-picker v-model="dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" @change="changeDate">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除
        </el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="患者名称" width="80" align="center" key="patientName" prop="patientName" />
      <el-table-column label="出生日期" width="120" align="center" key="patientBirth" prop="patientBirth" />

      <el-table-column label="性别" width="50" align="center" key="patientSex" prop="patientSex">
        <template slot-scope="scope">
          <div v-if="scope.row.patientSex==0">女</div>
          <div v-if="scope.row.patientSex==1">男</div>
          <!-- 性别0女 1男-->
        </template>
      </el-table-column>
      <el-table-column label="证件类型" align="center" key="idtype" prop="idtype">
        <template slot-scope="scope">
          <div v-if="scope.row.idtype==1">身份证</div>
          <div v-if="scope.row.idtype==2">护照</div>
          <div v-if="scope.row.idtype==3">无名无姓</div>
          <!-- 证件类型 1身份证2护照3无名无姓 -->
        </template>
      </el-table-column>
      <el-table-column label="证件号" align="center" key="idno" prop="idno" width="180" />
      <el-table-column label="手机号" align="center" key="phone" prop="phone" />
      <!--      <el-table-column label="年龄" align="center" key="age" prop="age"/>-->
      <!--      <el-table-column label="患者身份" align="center" key="listtype" prop="listtype"/>-->
      <el-table-column label="挂号单号" align="center" key="registno" prop="registno" />
      <el-table-column label="门诊号" align="center" key="mzh" prop="mzh" />

      <el-table-column label="患者状态" align="center" key="patientstatus" prop="patientstatus">
        <template slot-scope="scope">
          <!--          <div v-if="scope.row.patientstatus==0">极不</div>-->
          <div v-if="scope.row.patientstatus==1">一星</div>
          <div v-if="scope.row.patientstatus==2">二星</div>
          <div v-if="scope.row.patientstatus==3">三星</div>
          <div v-if="scope.row.patientstatus==4">四星</div>
          <div v-if="scope.row.patientstatus==5">五星</div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="150" align="center" key="regdate" prop="regdate">
        <template slot-scope="scope"> {{ mapDate(scope.row.regdate, scope.row.regtime) }}</template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
        <template slot-scope="scope" v-if="scope.row.userId !== 1">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="doDetail(scope.row)">详细
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="searchScore(scope.row)">信用查询
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">


        <el-form-item label="患者姓名">
          <el-input v-model="form.patientName" placeholder="请输入患者姓名" />
        </el-form-item>

        <!--        <el-form-item label="出生日期">-->
        <!--          <el-date-picker-->
        <!--            v-model="form.patientBirth"-->
        <!--            type="date"-->
        <!--            placeholder="请选择出生日期"-->
        <!--            value-format="yyyyMMdd"-->
        <!--            @change="changeDate"-->
        <!--          >-->
        <!--          </el-date-picker>-->
        <!--        </el-form-item>-->
        <el-form-item label="患者性别">
          <el-radio-group v-model="form.patientSex">
            <el-radio label="0">女</el-radio>
            <el-radio label="1">男</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="血型">
          <el-input v-model="form.bloodtype" placeholder="请输入血型" />
        </el-form-item>

        <el-form-item label="患者状态">
          <el-radio-group v-model="form.patientstatus">
            <el-radio label="1">一星</el-radio>
            <el-radio label="2">二星</el-radio>
            <el-radio label="3">三星</el-radio>
            <el-radio label="4">四星</el-radio>
            <el-radio label="5">五星</el-radio>

          </el-radio-group>
        </el-form-item>
        <el-form-item label="患者地址">
          <el-input v-model="form.address" placeholder="请输入患者地址" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="详情" :visible.sync="openDetail" width="900px" append-to-body>
      <el-form ref="form" label-width="150px">
        <div class="userBox">
          <img :src="detailForm.photoid" class="header">
          <div class="nameBox">
            <p style="  font-size: 18px;">{{ detailForm.patientName }}
              <span>（{{ detailForm.patientSex == '1' ? '男' : '女' }}）</span>
            </p>
            <p></p>
            <p>电话：{{ detailForm.phone }}</p>

            <p>证件类型：
              <span v-if="detailForm.idtype=='3'">无名无姓</span>
              <span v-if="detailForm.idtype=='2'">护照</span>
              <span v-if="detailForm.idtype=='1'">身份证</span>
            </p>
            <p>证件号：
              {{ detailForm.idno }}
            </p>

          </div>
        </div>
        <el-row>
          <div class="detailBox">
            <el-col :span="12">
              <el-form-item label="曾用名：">
                {{ detailForm.formerName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年龄：">
                {{ detailForm.age }}岁
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="血型：">
                {{ detailForm.bloodtype }}
              </el-form-item>
            </el-col>


            <el-col :span="12">
              <el-form-item label="国籍：">
                {{ detailForm.nationality }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="地址：">
                {{ detailForm.address }}
              </el-form-item>
            </el-col>
            <!--            <el-col :span="12">-->
            <!--              <el-form-item label="患者身份：">-->
            <!--                {{ detailForm.listtype }}-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <el-col :span="12">
              <el-form-item label="挂号单号：">
                {{ detailForm.registno }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否为黑白名单：">
                <div v-if="detailForm.credit_level=='0'">普通</div>
                <div v-if="detailForm.credit_level=='1'">白名单</div>
                <div v-if="detailForm.credit_level=='2'">黑名单</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="门诊号：">
                {{ detailForm.mzh }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="待缴费链接：">
                {{ detailForm.jflj }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="患者状态：">
                <div v-if="detailForm.patientstatus=='5'">五星</div>
                <div v-if="detailForm.patientstatus=='1'">一星</div>
                <div v-if="detailForm.patientstatus=='2'">二星</div>
                <div v-if="detailForm.patientstatus=='3'">三星</div>
                <div v-if="detailForm.patientstatus=='4'">四星</div>
                <div v-if="detailForm.patientstatus=='5'">五星</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间：">
                {{ mapDate(detailForm.regdate, detailForm.regtime) }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注：">
                {{ detailForm.remark }}
              </el-form-item>
            </el-col>
          </div>
        </el-row>
      </el-form>

    </el-dialog>
    <!-- 信用查询对话框 -->
    <el-dialog title="信用查询" :visible.sync="scoreInfo.open" width="80%" append-to-body>
      <div class="creditBox">
        <div class="leftBox">
          <div class="chart-wrapper">
            <pie-chart ref="pieEl" />
          </div>
          <div class="bigNum">
            <p>{{ userInfo.finalScore }}</p>最终信用评分
          </div>
        </div>
        <div class="rightBox">
          <div class="panel" style="height: 150px">
            <div class="headerBox"><img src="../../../assets/images/icon1.png" /></div>
            <div class="name">
              <div class="line" style="font-size: 18px">患者身份证号：{{ userInfo.idcard }}</div>
              <div class="line">
                <p>查询人：{{ userInfo.queriedBy }}</p>
                <p>查询时间：{{ userInfo.queryTime }}</p>

              </div>
            </div>
          </div>
          <div class="panelTable">
            <el-table :data="userInfo.creditDetails" height="310">
              <el-table-column label="明细类型" align="center" key="detailType" prop="detailType" />
              <el-table-column label="明细描述" align="center" key="detailDescription" prop="detailDescription" />
              <el-table-column label="明细评分" width="150" align="center" key="detailScore" prop="detailScore" />
            </el-table>
          </div>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import {
    searchList,
    delUser,
    addUser,
    updateUser
  } from '@/api/credit/patientList'
  import {
    searchCredit
  } from '@/api/credit/creditTable'
  import PieChart from '../creditTable/PieChart'
export default {
    dicts: [],
    name: 'patient',
    components: {

      PieChart

    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 导出遮罩层
        exportLoading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 用户表格数据
        userList: null,
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {
          patientId: '',
          patientName: '',
          // patientBirth: '',
          patientSex: '',
          phone: '',
          bloodtype: '',
          patientstatus: '',
          address: ''
        },
        detailForm: {},
        openDetail: false, //详情窗口

        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          idcard: '',
          name: '',
          startDate: '',
          endDate: '',
        },
        dateTime: [],
        scoreInfo: {
          open: false
        },

        // 表单校验
        rules: {
          patientName: [{
              required: true,
              message: '患者姓名不能为空',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 20,
              message: '患者姓名长度必须介于 2 和 20 之间',
              trigger: 'blur'
            }
          ],
          patientBirth: [{
            required: true,
            message: '出生日期不能为空',
            trigger: 'change'
          }],
          patientSex: [{
            required: true,
            message: '患者性别不能为空',
            trigger: 'change'
          }],
          patientstatus: [{
            required: true,
            message: '患者状态不能为空',
            trigger: 'change'
          }],
          address: [{
            required: true,
            message: '患者地址不能为空',
            trigger: 'blur'
          }],
          bloodtype: [{
            required: true,
            message: '血型不能为空',
            trigger: 'blur'
          }]
        },
        userInfo: {
          'idcard': null,
          'queryTime': null,
          'queriedBy': null,
          'insuranceScore': null,
          'identityScore': null,
          'recordScore': null,
          'staffScore': null,
          'blacklistScore': null,
          'finalScore': null,
          'detailType': null,
          'detailDescription': null,
          'detailScore': null,
          'creditDetails': null
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      mapDate(d, t) {
        var data = d ? d.slice(0, 4) + '-' + d.slice(4, 6) + '-' + d.slice(6, 8) : '',
          time = t ? t.slice(0, 2) + ':' + t.slice(2, 4) + ':' + t.slice(4, 6) : ''
        return data + '  ' + time
      },
      /** 查询用户列表 */
      getList() {
        this.loading = true
        console.log('queryParams', this.queryParams)
        searchList(this.queryParams).then(response => {
          this.userList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.patientId)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          patientId: '',
          patientName: '',
          // patientBirth: '',
          patientSex: '',
          phone: '',
          bloodtype: '',
          patientstatus: '',
          address: ''
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置搜索条件按钮操作 */
      resetQuery() {
        this.dateTime = []
        this.queryParams.startDate = ''
        this.queryParams.endDate = ''
        this.resetForm('queryForm')
        this.handleQuery()

      },

      changeDate(val) {
        console.log('val', val)
        var s = new Date(val[0]),
          ss = (new Date(s)).toLocaleString(),
          sss = ss.replace(/\//g, '-'),
          e = new Date(val[1]),
          ee = (new Date(e)).toLocaleString(),
          eee = ee.replace(/\//g, '-')

        this.queryParams.startDate = sss.toLocaleString()
        this.queryParams.endDate = eee.toLocaleString()

      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.open = true
        this.title = '添加用户'
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()

        this.form.patientId = row.patientId //患者id
        this.form.patientName = row.patientName // 患者名称
        // this.form.patientBirth = row.patientBirth //出生日期
        this.form.patientSex = row.patientSex //性别0女 1男
        this.form.phone = row.phone //手机号
        this.form.address = row.address //地址
        this.form.bloodtype = row.bloodtype //血型
        this.form.patientstatus = row.patientstatus //患者状态0 极不 1 不尊 2 普通 3优秀 4非常配合

        this.open = true
        this.title = '修改用户'
      },
      //详情
      doDetail(row) {

        this.detailForm.patientId = row.patientId //患者id
        this.detailForm.photoid = row.photoid //头像
        this.detailForm.patientName = row.patientName // 患者名称
        this.detailForm.formerName = row.formerName //曾经名称
        this.detailForm.patientBirth = row.patientBirth //出生日期
        this.detailForm.patientSex = row.patientSex //性别0女 1男
        this.detailForm.idtype = row.idtype //证件类型 1身份证2护照3无名无姓
        this.detailForm.idno = row.idno //证件号
        this.detailForm.phone = row.phone //手机号
        this.detailForm.age = row.age // 年龄
        this.detailForm.address = row.address //地址
        this.detailForm.bloodtype = row.bloodtype //血型
        this.detailForm.nationality = row.nationality // 国籍
        this.detailForm.identify_type = row.identify_type //识别类型5小程序其他pda
        this.detailForm.listtype = row.listtype //患者身份
        this.detailForm.registno = row.registno // 挂号单号
        this.detailForm.credit_level = row.credit_level //是否为黑白名单 0普通 1白名单 2黑名单
        this.detailForm.mzh = row.mzh //门诊号
        this.detailForm.jflj = row.jflj //待缴费链接
        this.detailForm.patientstatus = row.patientstatus //患者状态0 极不 1 不尊 2 普通 3优秀 4非常配合
        this.detailForm.remark = row.remark //备注
        this.detailForm.regtime = row.regtime //创建日期时分秒
        this.detailForm.regdate = row.regdate //创建日期年月日

        this.openDetail = true

      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const userIds = row.patientId || (this.ids).toString()
        console.log('userIds', userIds)
        this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
          return delUser({
            ids: userIds
          })
        }).then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        }).catch(() => {})
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs['form'].validate(valid => {
          if (valid) {
            updateUser(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })

          }
        })
      },
      searchScore(row) {

        console.log('row', row)
        this.loading = true
        //'12348'
        searchCredit({
          idcard: row.idno
        }).then(response => {
          this.loading = false
          if (!response.data) {
            this.$modal.msg(response.msg)
            return

          }
          this.scoreInfo.open = true
          this.userInfo = {
            'idcard': response.data.idcard,
            'queryTime': response.data.queryTime,
            'queriedBy': response.data.queriedBy,
            'insuranceScore': response.data.insuranceScore ? response.data.insuranceScore : 0, //医保信息评分
            'identityScore': response.data.identityScore ? response.data.identityScore : 0, //患者身份评分
            'recordScore': response.data.recordScore ? response.data.recordScore : 0, //就诊记录评分
            'staffScore': response.data.staffScore ? response.data.staffScore : 0, //医护人员主观评分
            'blacklistScore': response.data.blacklistScore ? response.data.blacklistScore : 0, //黑名单评分
            'finalScore': response.data.finalScore,
            'detailType': response.data.detailType,
            'detailDescription': response.data.detailDescription,
            'detailScore': response.data.detailScore,
            'creditDetails': response.data.creditDetails
          }
          setTimeout(() => {
            this.$refs.pieEl.initChart([{
                value: this.userInfo.insuranceScore,
                name: '医保信息评分'
              },
              {
                value: this.userInfo.identityScore,
                name: '患者身份评分'
              },
              {
                value: this.userInfo.recordScore,
                name: '就诊记录评分'
              },
              {
                value: this.userInfo.staffScore,
                name: '医护人员主观评分'
              },
              {
                value: this.userInfo.blacklistScore,
                name: '黑名单评分'
              }
            ])
          }, 200)

          this.loading = false
        })
      }
    }

  }
</script>

<style scoped>
  .creditBox {
    display: flex;
    justify-content: space-around;
    /* 水平方向间隔分布 */
    gap: 20px;
    /* 设置间隔为20px */
    height: 480px;
    padding-bottom: 50px;
    box-sizing: content-box;
  }

  .leftBox {
    height: 100%;
    flex: 3;
    background: #e7effc;
    border: solid 1px #afceff;
    /*box-shadow: 0 0 5px #eee;*/
  }

  .rightBox {
    height: 100%;
    flex: 4;

    /*box-shadow: 0 0 5px #eee;*/
  }

  .chart-wrapper {
    padding: 15px 15px 0;
    margin-bottom: 20px;
  }

  .bigNum {
    font-size: 18px;
    text-align: center;
    color: #333;
    margin-top: -20px;
  }

  .bigNum p {
    font-weight: 600;
    font-size: 52px;
    color: #5c78ff;
  }

  .panel {
    position: relative;
    background: #e7effc;
    border: solid 1px #afceff;
    width: 100%;
  }

  .headerBox {
    width: 110px;
    height: 110px;
    margin: 20px 0 0 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    border: solid 1px #afceff;
    padding: 10px;
    box-sizing: border-box;
  }

  .headerBox img {
    width: 100%;
    height: 100%;
  }

  .name {
    position: absolute;
    top: 30px;
    left: 160px;

    width: calc(100% - 200px);


  }

  .line {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 16px;
    line-height: 40px;
    color: #333;

  }


  .panelTable {
    height: 310px;
    margin-top: 18px;
    border: solid 1px #afceff;

  }

  .userBox {
    position: relative;
    width: 80%;
    /*margin: 0 auto;*/
    margin-left: 85px;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap
  }

  .header {
    width: 100px;
    height: 124px;
    border: solid 1px #e1e1e1;
  }

  .nameBox {

    padding-left: 25px;
    line-height: 30px;
    color: #000;

  }

  .nameBox span {
    font-size: 14px;
    color: #1f2d3d;
  }

  .detailBox .el-form-item {
    margin-bottom: 5px
  }

</style>